<template>
  <div>
    <div class="header">
      <div>新型冠状病毒肺炎</div>
      <div>确诊患者相同行程查询</div>
      <span style="font-size: 11px; font-weight: 300; text-align: center">
        数据更新时间 2020-12-31 14:12</span
      >
    </div>
    <div
        id="content2"
        style="height: 400px;"
        ></div>
    <div id="content1" style="height: 400px"></div>

    <!-- 查询 -->
    <div class="content">
      <!-- {{ form_article }} -->
      <el-form :model="form_article">
        <el-form-item label="日期：" :label-width="formLabelWidth_article">
          <el-date-picker
            v-model="form_article.t_date"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="选择日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="车次：" :label-width="formLabelWidth_article">
          <el-input
            v-model="form_article.t_no"
            placeholder="车次或航班，例如：T123 或 AC1111"
          ></el-input>
        </el-form-item>
        <el-form-item label="地区：" :label-width="formLabelWidth_article">
          <el-input
            v-model="form_article.eare"
            placeholder="可不填，例如：成都 或 四川"
          ></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          style="background-color: #009688; color: #fff"
          icon="el-icon-search"
          @click="show_dialog"
          >查询</el-button
        >
        <el-button @click="dialog_form">取 消</el-button>
      </div>
    </div>

    <div style="margin-top: 15px; margin-bottom: 5px">
      <el-radio-group v-model="radio1" @change="selectData">
        <el-radio-button label="0">全部</el-radio-button>
        <el-radio-button label="1">飞机</el-radio-button>
        <el-radio-button label="2">火车</el-radio-button>
        <el-radio-button label="3">地铁</el-radio-button>
        <el-radio-button label="4">长途客车/大巴</el-radio-button>
        <el-radio-button label="5">公交车</el-radio-button>
        <el-radio-button label="6">出租车</el-radio-button>
        <el-radio-button label="7">轮船</el-radio-button>
        <el-radio-button label="8">其它公共场所</el-radio-button>
      </el-radio-group>
    </div>

    <!-- 模态框 -->
    <el-dialog
      :title="title"
      :visible.sync="dialog_article"
      width="80%"
      @click="deletes_article"
    >
      <!-- {{ mtk }} -->
      <el-table :data="mtk" style="width: 100%">
        <el-table-column
          align="center"
          prop="id"
          label="编号"
          width="50"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="who"
          label="线索来源"
          width="120"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="t_date"
          label="日期"
          width="80"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="t_no"
          label="车次/车牌/航班/场所名"
          width="140"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <!-- <el-table-column align="center" prop="t_type" label="出行类型" width="80" :show-overflow-tooltip="true"></el-table-column> -->
        <el-table-column
          align="center"
          :show-overflow-tooltip="true"
          label="出行类型"
          width="80"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.t_type == 1">飞机</span>
            <span v-if="scope.row.t_type == 2">火车</span>
            <span v-if="scope.row.t_type == 3">地铁</span>
            <span v-if="scope.row.t_type == 4">长途客车/大巴</span>
            <span v-if="scope.row.t_type == 5">公交车</span>
            <span v-if="scope.row.t_type == 6">出租车</span>
            <span v-if="scope.row.t_type == 7">轮船</span>
            <span v-if="scope.row.t_type == 8">其它公共场所</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="t_pos_start"
          label="出发站"
          width="90"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="t_pos_end"
          label="到达站"
          width="90"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="t_no_sub"
          label="车厢"
          width="80"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="t_memo"
          label="出行描述"
          width="100"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="t_start"
          label="开始时间"
          width="120"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="t_end"
          label="结束时间"
          width="120"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="created_at"
          label="提交时间"
          width="120"
          :show-overflow-tooltip="true"
        ></el-table-column>
      </el-table>
    </el-dialog>

    <div class="table">
      <el-table :data="pca2" style="width: 100%; padding: 0 5px">
        <el-table-column
          align="center"
          prop="id"
          label="编号"
          width="50"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="who"
          :show-overflow-tooltip="true"
          label="线索来源"
          width="150"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="t_date"
          label="日期"
          width="80"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="t_no"
          :show-overflow-tooltip="true"
          label="车次/车牌/航班/场所名"
          width="150"
        ></el-table-column>
        <el-table-column
          align="center"
          :show-overflow-tooltip="true"
          label="出行类型"
          width="80"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.t_type == 1">飞机</span>
            <span v-if="scope.row.t_type == 2">火车</span>
            <span v-if="scope.row.t_type == 3">地铁</span>
            <span v-if="scope.row.t_type == 4">长途客车/大巴</span>
            <span v-if="scope.row.t_type == 5">公交车</span>
            <span v-if="scope.row.t_type == 6">出租车</span>
            <span v-if="scope.row.t_type == 7">轮船</span>
            <span v-if="scope.row.t_type == 8">其它公共场所</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="t_pos_start"
          :show-overflow-tooltip="true"
          label="出发站"
          width="110"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="t_pos_end"
          :show-overflow-tooltip="true"
          label="到达站"
          width="90"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="t_no_sub"
          :show-overflow-tooltip="true"
          label="车厢"
          width="80"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="t_memo"
          :show-overflow-tooltip="true"
          label="出行描述"
          width="80"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="t_start"
          :show-overflow-tooltip="true"
          label="开始时间"
          width="130"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="t_end"
          :show-overflow-tooltip="true"
          label="结束时间"
          width="130"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="created_at"
          label="提交时间"
          width="130"
        ></el-table-column>
      </el-table>

      <el-pagination
        background
        layout="prev, pager, next"
        :page-size="obj.pageSize"
        :current-page="obj.page"
        @current-change="change"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
// 导入qs
import qs from "qs";
// 导入moment
import moment from "moment";
import pca from "../../assets/404_images/data3.json";
import { mapActions, mapState } from "vuex";

export default {
  data() {
    return {
      pca,
      pca2: [],
      title: "行程查询",
      obj: {
        page: 1,
        pageSize: 10,
      },
      tableData: [],
      total: 0,
      dialog_article: false,
      form_article: {},
      formLabelWidth_article: "60px",
      options: [],
      res: {},
      mtk: [],
      radio1: "全部",
    };
  },
  created() {
    this.page_query();
  },
  mounted() {
    // 映射
    this.initEchart();
    this.initEchart2();
  },
  methods: {
    ...mapActions("article", [
      "findAllCategory",
      "page_query_art",
      "saveOrUpdate",
    ]),
    initEchart() {
      // 初始化图表
      var myChart = echarts.init(document.getElementById("content1"));

      // 指定图表的配置项和数据
      var option = {
        title: {
          text: "新冠确诊患者行程图",
          subtext: "出行方式",
          left: "center",
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          left: "center",
          top: "bottom",
          data: [
            "rose1",
            "rose2",
            "rose3",
            "rose4",
            "rose5",
            "rose6",
            "rose7",
            "rose8",
          ],
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: {
              show: true,
              type: ["pie", "funnel"],
            },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        series: [
          {
            name: "2020年12月患者出行方式",
            type: "pie",
            radius: [20, 110],
            center: ["25%", "50%"],
            roseType: "radius",
            label: {
              show: false,
            },
            emphasis: {
              label: {
                show: true,
              },
            },
            data: [
              { value: 39, name: "飞机" },
              { value: 0, name: "火车" },
              { value: 0, name: "地铁" },
              { value: 0, name: "长途客车/大巴" },
              { value: 0, name: "公交车" },
              { value: 0, name: "出租车" },
              { value: 0, name: "轮船" },
              { value: 0, name: "其它公共场所" },
            ],
          },
          {
            name: "患者累计出行方式",
            type: "pie",
            radius: [20, 110],
            center: ["75%", "50%"],
            roseType: "area",
            data: [
              { value: 1571, name: "飞机" },
              { value: 1361, name: "火车" },
              { value: 78, name: "地铁" },
              { value: 186, name: "长途客车/大巴" },
              { value: 390, name: "公交车" },
              { value: 162, name: "出租车" },
              { value: 25, name: "轮船" },
              { value: 706, name: "其它公共场所" },
            ],
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    initEchart2() {
      // 初始化图表
      var myChart = echarts.init(document.getElementById("content2"));

      // 指定图表的配置项和数据
      var option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        legend: {
          data: [
            "飞机",
            "火车",
            "地铁",
            "长途客车/大巴",
            "公交车",
            "出租车",
            "轮船",
            "其它公共场所",
          ],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "飞机",
            type: "bar",
            data: [1, 1, 0, 0, 2, 3, 0],
            markLine: {
              lineStyle: {
                type: "dashed",
              },
              data: [[{ type: "min" }, { type: "max" }]],
            },
          },
          {
            name: "火车",
            type: "bar",
            stack: "广告",
            data: [0, 0, 0, 0, 0, 0, 0],
          },
          {
            name: "地铁",
            type: "bar",
            stack: "广告",
            data: [0, 0, 0, 0, 0, 0, 0],
          },
          {
            name: "长途客车/大巴",
            type: "bar",
            stack: "广告",
            data: [0, 0, 0, 0, 0, 0, 0],
          },
          {
            name: "公交车",
            type: "bar",
            data: [0, 0, 0, 0, 0, 0, 0],
            
          },
          {
            name: "出租车",
            type: "bar",
            barWidth: 5,
            stack: "搜索引擎",
            data: [0, 0, 0, 0, 0, 0, 0],
          },
          {
            name: "轮船",
            type: "bar",
            stack: "搜索引擎",
            data: [0, 0, 0, 0, 0, 0, 0],
          },
          {
            name: "其它公共场所",
            type: "bar",
            stack: "搜索引擎",
            data: [0, 0, 0, 0, 0, 0, 0],
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    page_query() {
      this.page_query_art(this.obj);
    },
    dialog_form() {
      this.form_article = {};
    },
    deletes_article() {
      this.dialog_article = false;
      this.form_article = {};
      this.mtk = [];
    },
    // 页码改变
    change(page) {
      this.obj.page = page;
    },
    selectData() {
      // this.pca2.data=this.pca.data;
      // console.log(this.pca2,'===');
      this.pca2 = [];
      this.pca.data.map((item) => {
        if (item.t_type == this.radio1) {
          this.pca2.push(item);
        } else if (this.radio1 == "0") {
          this.pca2 = this.pca.data;
        }
      });

      console.log(this.radio1);
      console.log(this.pca2);

      this.pca.data.map((item) => {
        if (
          this.form_article.t_date &&
          this.form_article.t_no &&
          this.form_article.eare
        ) {
          if (
            item.t_date == this.form_article.t_date &&
            item.t_no == this.form_article.t_no &&
            (item.t_pos_start == this.form_article.eare ||
              item.t_pos_end == this.form_article.eare)
          ) {
            this.mtk.push(item);
          }
        } else if (this.form_article.t_date && this.form_article.t_no) {
          if (
            item.t_date == this.form_article.t_date &&
            item.t_no == this.form_article.t_no
          ) {
            this.mtk.push(item);
          }
        } else if (this.form_article.t_date && this.form_article.eare) {
          if (
            item.t_date == this.form_article.t_date &&
            (item.t_pos_start == this.form_article.eare ||
              item.t_pos_end == this.form_article.eare)
          ) {
            this.mtk.push(item);
          }
        } else if (
          this.form_article.t_no &&
          (item.t_pos_start == this.form_article.eare ||
            item.t_pos_end == this.form_article.eare)
        ) {
          if (
            item.t_no == this.form_article.t_no &&
            (item.t_pos_start == this.form_article.eare ||
              item.t_pos_end == this.form_article.eare)
          ) {
            this.mtk.push(item);
          }
        } else {
          if (
            item.t_date == this.form_article.t_date ||
            item.t_no == this.form_article.t_no ||
            item.t_pos_start == this.form_article.eare ||
            item.t_pos_end == this.form_article.eare
          ) {
            this.mtk.push(item);
          }
        }
      });
    },
    // 显示模态框
    show_dialog() {
      // 0. 修改模态框标题
      this.title = "行程查询";
      this.dialog_article = true;
      this.mtk = [];
      this.selectData();
    },
  },
};
</script>


<style scoped>
.header {
  font-size: 22px;
  font-weight: 300;
  color: #333;
  padding: 0 10px;
  height: 100px;
  width: 242px;
  text-align: center;
  margin-top: 15px;
}
.content {
  margin-top: 17px;
}
.content label {
  float: left;
  display: block;
  /* width: auto; */
  width: 80px;
  font-weight: 400;
  line-height: 34px;
  padding-left: 10px;
  width: 70px;
  font-size: 15px;
}
</style>